<template>
    <div class="home">
      <!-- 饿了么搜索框 -->
      <div class="search">
          <div class="title">饿了么</div>
          <div class="inputBox">
              <input type="text" placeholder="输入商家、商品名称">
          </div>    
      </div>
      <!-- 轮播图 -->
      <div class="swiper">
          <img :src=pic alt="">
      </div>
      <!-- 商品列表 -->
      <div class="list">
        <div class="title"><h3>猜你喜欢</h3></div>
        <div class="sort">
            <span :style="{fontWeight:currentIndex == index?'bold':''}" @click="handleclick(index)"  v-for="(item,index) in list" :key="index">{{item}}</span>
        </div>
        <div class="goods" v-for="(item,index) in goods" :key="index">
            <div class="imgBox">
                <img :src="item.picUrl" alt="">
            </div>
            <div class="text">
                <div class="name">{{item.name}}</div>
                <div class="count">
                    <span>★3.5</span>
                    <span>{{item.monthSalesTip}}</span>
                </div>
                <div class="price">
                    <div class="left">
                        <span>{{item.minPriceTip}}</span>
                        <span>{{item.shippingFeeTip}}<span class="delLine">￥10</span></span>
                    </div>
                    <div class="right">
                        <span>{{item.deliveryTimeTip}}</span>
                        <span>{{item.distance}}</span>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>  
  </template>
  
  <script>
import {shop_list} from "../../utils/api";
  export default {
      data(){
          return{
              pic:"https:img2.baidu.com/it/u=999150412,884289425&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=320",
              currentIndex:0,
              list:['综合排序','距离最近','销量最高','筛选'],
              goods:[]
          }
      },
      mounted(){ 
              shop_list().then(res=>{
              this.goods = res.data.list; 
          })
      },
      methods:{
          handleclick(index){
              this.currentIndex = index;
              if( index == 1 ){ 
                  this.goods.sort((a,b)=>{
                      return a.wmPoiScore - b.wmPoiScore;
                  })
              }
              else if( index == 2 ){ 
                  this.goods.sort((a,b)=>{
                      return b.wmPoiScore - a.wmPoiScore;
                  })
              }
          }          
      }
  }
  </script>
  
  <style lang="scss" scoped>
      // 搜索框
      .search{
          width: 100%;
          height: 100px;
          padding: 10px;
          box-sizing: border-box;
          background: rgba(1,142,255,0.7);
      }
      .search .title{
          margin: 10px 0;
          font-size: 24px;
          color:white;
          font-weight: bold;
      }
      .search input{
          width: 100%;
          height: 30px;
          border-radius: 20px;
          border: none;
          outline: none;
          text-align: center;
      }
      // 轮播图
      .swiper{
          height: 100px;
          margin: 10px;
          background: #f5f5f5;
      }
      .swiper img{
          width: 100%;
          height: 100%;
          border-radius: 10px;
      }
      // 商品列表
      h3{
          padding-left: 10px;
      }
      .sort{
          margin: 0 10px;
          display: flex;
          align-items: center;
          justify-content: space-between;
      }
      .goods{
          display: flex;
          margin: 10px;
          height: 100px;
      }
      .goods .imgBox{
          margin-right: 10px;
      }
      .goods .imgBox img{
          height: 80px;
      }
      .goods .text{
          margin: 0 10px;
      }
      .goods .text .name{
          font-weight: bold;
          font-size: 14px;
          margin-bottom: 5px;
      }
      .goods .text .count span{
          font-size: 14px;
          margin-right: 20px;
      }
      .goods .text .count span:nth-child(1){
          color:orangered
      }
      .goods .text .price{
          font-size: 12px;
          margin: 10px 0;
          display: flex;
          align-items: center;
          justify-content: space-between;
      }
      .goods .text .price .left{
        width:130px;
      }
      .goods .text .price .right{
        flex: 1;
      }
      .delLine{
          text-decoration:line-through;
      }
  </style>